<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <p v-for="(value, key) in props.row" :key="key" m="t-0 b-2">
            {{ key + ': ' + value }}
          </p>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="ID" prop="id" />
    <el-table-column
      :label="$t('pageInventory.table.hardwareType')"
      prop="hardwareType"
    />
    <el-table-column prop="health" :label="$t('pageInventory.table.health')">
      <template #default="scope">
        <el-tag :type="tagType(scope.row.health)" disable-transitions>{{
          scope.row.health
        }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      :label="$t('pageInventory.table.locationNumber')"
      prop="locationNumber"
    />
    <el-table-column
      :label="$t('pageInventory.table.identifyLed')"
      prop="locationIndicatorActive"
    >
      <template #default="scope">
        <el-switch
          v-model="scope.row.locationIndicatorActive"
          class="mr-2"
          style="--el-switch-on-color: #13ce66"
          @change="toggleIdentifyLedSwitch"
        />
        <span v-if="scope.row.locationIndicatorActive">
          {{ $t('global.status.on') }}
        </span>
        <span v-else>{{ $t('global.status.off') }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { useSystemStore } from '@/store/SystemManagement/SystemInformation/SystemStore';
import { usePerformanceMonitorStore } from '@/store/SystemManagement/PerformanceMonitor/PerformanceMonitorStore';

const systemStore = useSystemStore();
const performanceMonitorStore = usePerformanceMonitorStore();
performanceMonitorStore.getHostStatus();

const tableData = computed(() => systemStore.systems);

const tagType = (val: string) => {
  switch (val) {
    case 'OK':
      return 'success';
    case 'Critical':
      return 'danger';
    case 'Warning':
      return 'warning';
  }
};

const toggleIdentifyLedSwitch = (state: any) => {
  systemStore
    .changeIdentifyLedState(state)
    .catch(({ message }: { message: string }) =>
      ElNotification({
        title: 'Error',
        message: message,
        type: 'error',
      }),
    );
};
</script>
